<!--
 * @author: 十一
 * @since: 2024-04-22
 * index.vue
 * @desc: new page
-->
<template>
  <PageHeader title="站点收录">
    <template v-slot:S1>
      <a-button key="2" @click="getData">
        <template #icon>
          <i class="iconfont icon-content icon-shuaxin mr-2"></i>
        </template>
        刷新</a-button
      >
      <a-button key="1" type="primary" @click="showDrawer(0, {})">新增</a-button>
    </template>
  </PageHeader>
  <a-form layout="inline">
    <a-form-item class="!mb-4">
      <a-select
        v-model:value="pagination.category_id"
        placeholder="分类查询"
        allowClear
        @change="changeclassify"
        style="width: 180px"
      >
        <a-select-option :value="item.id" v-for="item in classificationList" :key="item.id">
          {{ item.title }}</a-select-option
        >
      </a-select>
    </a-form-item>
    <a-form-item>
      <a-button type="primary" @click="getData">查询</a-button>
    </a-form-item>
  </a-form>
  <a-table :dataSource="dataSource" :columns="columns" bordered :pagination="false">
    <template #bodyCell="{ column, value }">
      <template v-if="column.key === 'thumbnail'">
        <img :src="value" style="width: 40px; height: auto" />
      </template>
      <template v-if="column.key === 'classifyInfo'">
        {{ value.title }}
      </template>

      <template v-if="column.key === 'link'">
        <a :href="value" target="_blank">{{ value }}</a>
      </template>
      <template v-if="column.key === 'type'">
        {{ formatDictionaryItem('INCLUSION', value) }}
      </template>

      <template v-if="column.key === 'created_at'">
        {{ formatDate(value, 'YYYY-MM-DD HH:MM:SS') }}
      </template>
      <template v-if="column.key === 'operation'">
        <a-tag color="#2db7f5" style="cursor: pointer" @click="showDrawer(1, value)">编辑</a-tag>
        <a-tag color="#f50" style="cursor: pointer" @click="handleDelete(value)">删除</a-tag>
      </template>
    </template>
  </a-table>
  <br />
  <a-pagination
    v-model:current="pagination.current"
    :total="pagination.total"
    @change="changePagination"
    style="float: right"
  />
  <SiteInclusionComponents ref="siteInclusionComponentsRefs" @childGetData="getData" />
</template>

<script lang="ts" setup>
import PageHeader from '@/components/pageHeader.vue'
import SiteInclusionComponents from './components/site-inclusion-components.vue'
import { reactive, ref, toRaw } from 'vue'
import { formatDictionaryItem } from '@/utils/common'
import { getSiteInclusionList, deleteSiteInclusion, getClassificationList } from '@/servers/main'
import { message } from 'ant-design-vue'
import { formatDate } from '@/utils/common'
import type { RootObject } from '@/ts-type'
let pagination = reactive({
  pageSize: 10,
  current: 1,
  total: 0
})
let siteInclusionComponentsRefs: any = ref('')
function changePagination(page: number, pagesize: number) {
  pagination.current = page
  pagination.pageSize = pagesize
  getData()
}
let classificationList = ref()
function changeclassify(value: string) {
  console.log(value)
  pagination.current = 1
}
// 获取列表
function getData() {
  const { total, ...result } = toRaw(pagination)
  getSiteInclusionList(toRaw(result)).then((response: any) => {
    dataSource.value = response.result.list
    pagination.total = response.result.total
  })
}
getData()
function getClassification() {
  getClassificationList({}).then((response) => {
    classificationList.value = response.results
  })
}
getClassification()
// 删除

function handleDelete(value: any) {
  deleteSiteInclusion({ id: value.id }).then((responese: any) => {
    if (responese.code === 200) {
      message.success(responese.message)
      console.log(responese)
      pagination.current = 1
      getData()
    } else {
      message.error(responese.message)
    }
  })
}
const drawerOptions = reactive({
  title: '新增站点',
  options: {},
  state: 0
})
function showDrawer(state: number, value: object) {
  console.log(siteInclusionComponentsRefs)
  drawerOptions.state = state
  if (state == 0) {
    ;(drawerOptions.title = '新增站点'), (drawerOptions.options = {})
  } else {
    ;(drawerOptions.title = '编辑'), (drawerOptions.options = value)
  }
  siteInclusionComponentsRefs.value.showDrawer(drawerOptions)
}
const dataSource = ref([])
const columns = reactive([
  {
    title: '站点名称',
    dataIndex: 'title',
    key: 'title',
    align: 'center'
  },
  {
    title: '站点分类',
    dataIndex: 'classifyInfo',
    key: 'classifyInfo',
    align: 'center'
  },
  {
    title: '站点地址',
    dataIndex: 'link',
    key: 'link',
    align: 'center'
  },
  {
    title: '描述',
    dataIndex: 'description',
    key: 'description',
    align: 'center',
    ellipsis: true
  },
  {
    title: '提交人手机号',
    dataIndex: 'phone_number',
    key: 'phone_number',
    align: 'center',
    ellipsis: true
  },
  {
    title: '提交人邮箱',
    dataIndex: 'email',
    key: 'email',
    align: 'center',
    ellipsis: true
  },
  {
    title: '提交人昵称',
    dataIndex: 'nickname',
    key: 'nickname',
    align: 'center',
    ellipsis: true
  },
  {
    title: '站点状态',
    dataIndex: 'type',
    key: 'type',
    align: 'center',
    ellipsis: true
  },
  {
    title: '创建时间',
    dataIndex: 'created_at',
    key: 'created_at',
    align: 'center'
  },
  {
    title: '操作',
    key: 'operation',
    align: 'center',
    width: 140
  }
])
</script>

<style lang="less" scoped></style>
